<template>
     <div class="app-container">
         <el-form ref="form" :model="form" label-width="24px" >


             <el-form-item label="">
                 <!--                <input type="file"   @change="changeFile($event)"  webkitdirectory >{{packfilepath}}</input>-->
                 <el-col :span="11">
                     <el-upload style="display: inline-block;"
                                class="upload-demo"
                                ref="upload"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :limit="1"
                                :auto-upload="false">
                         <el-button slot="trigger" size="small" type="primary">选取模型文件</el-button>
                         <!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                         <!--                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                     </el-upload>
                 </el-col>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="onSubmit">开始部署</el-button>
                 <!--                <el-button @click="onCancel">Cancel</el-button>-->
             </el-form-item>
         </el-form>
         <el-main>
             <el-collapse v-model="activeNames" @change="">
                 <el-collapse-item title="控制台" name="1">
                     <div id="terminal" style="margin-bottom: 2px" ref="terminal"></div>
                 </el-collapse-item>

             </el-collapse>
         </el-main>
     </div>


</template>

<script>
    import { Terminal } from "xterm"
    import "xterm/css/xterm.css"
    import "xterm/lib/xterm.js"
    var term
    export default {
        name: "deployment_model",
        data () {
            return {
                activeNames: ['1'],
                fileList: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        },
        mounted() {
            term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: 30, //行数
                // cols: parseInt(_this.cols), // 不指定行数，自动回车后光标从下一行开始
                convertEol: true, //启用时，光标将设置为下一行的开头
                //   scrollback: 50, //终端中的回滚量
                disableStdin: false, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                theme: {
                    foreground: "#7e9192", //字体
                    background: "#002833", //背景色
                    cursor: "help", //设置光标
                    lineHeight: 16
                }
            });
            // 挂载到dom
            term.open(this.$refs["terminal"]);
            term.writeln("Welcome to use Superman... ");
        }
    }
</script>

<style scoped>

</style>